<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="margin:5px 0;">
      <el-col :span="8">
        <el-input placeholder="请输入搜索id" v-model="search" @clear="getlist" clearable prefix-icon="el-icon-search">
          <el-button slot="append" icon="el-icon-search" @click="getdetails"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="goAddpage">添加商品</el-button>
        <!-- <span>{{'2020-3-13 22:3:11' | dateFormat}}</span> -->
      </el-col>
    </el-row>
    <!-- 商品列表区域 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="280"></el-table-column>
      <el-table-column prop="price" label="价格" width="180"></el-table-column>
      <el-table-column prop="banelurl" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.url.split(',')[0]" alt width="50px" height="50px" />
        </template>
      </el-table-column>
      <el-table-column width="120" label="商品属性">
        <template slot-scope="scope">
          <div v-for="item in good" :key="item.id">
            <el-tag type="warning" v-if="scope.row.type==item.type">{{item.name}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
            <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="update(scope.row.id)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
            <el-button type="success" icon="el-icon-check" circle size="mini" @click="$router.push({'name':'gettype'})"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="$message.warning('抱歉您没有权限')"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <page @down="change" @up="changes" :list="tableData1"></page>
    <!-- 修改对话框 -->
    <el-dialog title="修改" :visible.sync="updateVisible" width="65%" :before-close="handleClose">
      <el-form :model="eidform"  class="el" ref="eidfromRef">
        <el-form-item label="商品标题" prop="name" label-width="120px">
          <el-input v-model="eidform.goodsname" style="width:350px;"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="name" label-width="120px">
          <el-input v-model="eidform.price" style="width:350px;"></el-input>
        </el-form-item>
        <!-- 商品图片 -->
        <el-form-item label="商品图片" label-width="120px">
          <el-upload
            action="/img/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handles1"
            :file-list="fileList1"
             :limit="5"
          >
           <i class="el-icon-plus"></i>
            <!-- <i class="el-icon-delete" v-show="eidform.url" @click.stop="handleRemove3"></i> -->
                  <!-- <img v-if="eidform.url" :src="eidform.url" class="avatar" /> -->
                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品详图" label-width="120px">
          <el-upload
            action="/img/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview1"
            :on-remove="handleRemove1"
            :on-success="handles2"
             :file-list="fileList"
              :limit="5"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="dialogImageUrl1" alt />
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getdetail">取 消</el-button>
        <el-button type="primary" @click="getupdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axi from '../../utils/text.js'
import page from '@/components/pagesize.vue'
export default {
  inject: ['reload'],
  data() {
    return {
      search: '',
      fileList: [],
      fileList1: [],
      tableData1: [],
      tableData: [],
      // 控制修改的显示与隐藏
      updateVisible: false,
      eidform: {},
      dialogVisible: false,
      dialogImageUrl: '',
      dialogVisible1: false,
      dialogImageUrl1: '',
      userId: '',
      good: [],
      urls: '',
      c: [],
      d: []
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    getlist() {
      // console.log(this.$axios.defaults.baseURL)
      // axios.defaults.baseURL = '/'
      this.$http
        .post('/goods/modiy/get', { type: 0 })
        .then(res => {
          this.tableData1 = res.data.message || []
          this.tableData = res.data.message.slice(0, 10)
        })
        .catch(err => {
          console.log(err)
        })
      axi.goods().then(res => {
        this.good = res.data.message
        //  console.log(this.good,'商品标签')
      })
    },
    getdetails() {
      this.$http.post('/goods/modiy/detail', { id: this.search }).then(res => {
        this.tableData = res.data.message
      })
    },
    // 修改事件
    update(id) {
      this.d = []
      this.c = []
      this.userId = id
      this.updateVisible = true
      this.$http.post('/goods/modiy/detail', { id: id }).then(res => {
        console.log(res)
        if (res.data.err_code !== 200) {
          return this.$message.error('获取数据失败')
        }
        if (res.data.message[0].banelurl) {
          res.data.message[0].banelurl.split(',').forEach(item => {
            if (item) {
              this.fileList.push({ url: item })

              this.d.push(item)
            }
          })
        }
        if (res.data.message[0].url) {
          res.data.message[0].url.split(',').forEach(item => {
            if (item) {
              this.fileList1.push({ url: item })

              this.c.push(item)
            }
          })
        }
        this.eidform = res.data.message[0]
        console.log(this.eidform)
      })
    },
    // 提交修改事件
    getupdate() {
      const data = {
        id: this.eidform.id,
        banelurl: this.eidform.banelurl,
        dates: this.eidform.dates,
        gender: this.eidform.gender,
        goodsname: this.eidform.goodsname,
        maxpeople: this.eidform.maxpeople,
        name: this.eidform.name,
        price: this.eidform.price,
        status: this.eidform.status,
        type: this.eidform.type,
        // url:''
        url: this.urls || this.eidform.url
      }
      this.c = []
      this.d = []
      console.log(data, '修改是的数据')
      // this.eidform.id=String(this.eidform.id)
      // this.eidform.id=  this.eidform.id+''
      // {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }},
      this.$http.post('/goods/update/modiy', data).then(res => {
        console.log(res)
        if (res.data.err_code === 1) {
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
        }
        this.reload()
      })
      this.$refs.eidfromRef.resetFields()
      this.handleRemove()
      this.handleRemove1()
      this.updateVisible = false
    },
    // 轮播图片上传事假
    handlePictureCardPreview(file) {
      console.log(file)
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    // 轮播图片移除事件
    handleRemove(v) {
      // this.c=this.eidform.url.split(',')||this.c
      const c = this.c.indexOf(v.url)
      console.log(c)
      this.c.splice(c, 1)
      this.eidform.url = this.c.join(',')
      //  console.log(this.eidform.url.split(','))
      //  this.eidform.url.split(',').forEach(item=>{
      //   // console.log(item)
      //     console.log(String(item)==String(v.url))
      //     if(String(item)==String(v.url)){
      //     //  console.log(item)
      //       item=''
      //     }else{

      //        console.log(item,'还有多的')
      //       if(item==''){
      //       //   let c=[]
      //       //   c.push(item)
      //       //   // this.urls+=item+','
      //       //  // this.urls+=item.join(',')
      //       //  console.log(c.join(','))
      //       }else{
      //          let c1=[]
      //         //this.c=[]
      //        c1.push(item)
      //          console.log(c1.join(','))
      //          this.urls=c1.join(',')
      //       }

      //     }

      //     //console.log(item,this.urls)

      //   })
      console.log(this.c)
      //  console.log(v.url)
      console.log(this.eidform.url, '没有到这里来吗')
    },
    // 轮播图片上传
    handles1(file) {
      this.eidform.url += file.data + ','
    },
    // 详情图片上传事假
    handlePictureCardPreview1(file) {
      console.log(file)
      this.dialogVisible1 = true
      this.dialogImageUrl1 = file.url
    },
    // 详情图片移除事件
    handleRemove1(v) {
      this.dialogImageUrl1 = ''
      const c = this.d.indexOf(v.url)
      console.log(c)
      this.d.splice(c, 1)
      this.eidform.banelurl = this.d.join(',')
      console.log(this.eidform.banelurl)
      // console.log('23')
    },
    // 详情图片上传
    handles2(file) {
      this.eidform.banelurl += file.data + ','
    },
    // 修改图片的事件
    handleRemove3(file, fileList) {
      //  this.file='',
      // this.dialogImageUrl1=''
    },
    // 下一页点击事件
    change(num1) {
      this.tableData = num1
      // this.tableData= this.tableData1.slice(num1,si)

      console.log(this.tableData, num1, '父组件下一页')
    },
    // 上一页
    changes(num1) {
      // console.log(num1,si)
      this.tableData = num1
      // this.tableData=this.tableData1.slice(num1,si)
    },
    // 跳转商品添加页面
    goAddpage() {
      this.$router.push('/getadd')
    },
    getdetail() {
      this.fileList = []
      this.fileList1 = []
      this.updateVisible = false
      // this.reload()
    },
    handleClose() {
      this.fileList = []
      this.fileList1 = []
      this.updateVisible = false
    }
  },
  components: {
    page
  },
  watch: {
    tableData(val) {
      this.tableData = val
      console.log(val, '监听的值')
    },
    url(v) {
      console.log('变化来得')
    }
  }
}
</script>
<style lang="less" scoped>
.el {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.el-form-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
